<!--
 * @Description: 异常管理-生产异常看板
 * @Autor: 曹敬涛
 * @Date: 2021-08-16 15:45:18
 * @LastEditors: 商晓彬
 * @LastEditTime: 2021-12-21 21:10:57
-->
<div id="main" class="ex-management">
  <div class="ex-title">
    <div></div>
    <div (click)="full()" style="cursor: pointer;margin-left: 135px;">生产异常看板</div>
    <div class="flex-style">
      <div class="time-style mr20" [innerHTML]="time" ></div>
      <div class="time-style">
        <div>{{date}}</div>
        <div>{{week}}</div>
      </div>
    </div>


  </div>
  <div class="ui-g" style="padding: 0 30px;">
    <div class="ui-g-5" style="padding: 0;width: 45.6667%;">
      <div class="ui-g">
        <div class="ui-g-12" style="padding: 0;height: 322px;margin-bottom: 20px;">
          <div class="ui-g-4" *ngIf="inepectionBoard" style="padding-top: 0;padding-left: 0;">
            <div class="number">
              <div class="number-text">{{inepectionBoard.notProcessing}}</div>
              <div class="number-title">未处理数量异常</div>
            </div>
            <div class="number">

              <div class="number-text">{{inepectionBoard.processing}}</div>
              <div class="number-title">处理中数量异常</div>
            </div>

          </div>
          <div class="ui-g-8 pie-charts" style="padding: 0;display: flex;align-items: center;flex-direction: column;">
            <div class="pie-title">异常严重度分布</div>
            <p-chart width="262px" type="pie" [data]="data2"></p-chart>


          </div>

        </div>
        <div class="ui-g-12  pie-charts" style="height: 609px;;overflow-y: scroll;">

          <div class="pie-title">当前异常分布</div>
          <div *ngFor="let item of inspectionDistribution">

            <div class="text-style">{{item.inspectionDetils}}</div>
            <p-progressBar [showValue]="false" [value]="item.percent"></p-progressBar>
          </div>

        </div>
      </div>
    </div>
    <div class="ui-g-1" style="padding: 0;width: 2.333%;"></div>
    <div class="ui-g-6  pie-charts" style="width: 51%;height: 949px;overflow-y: scroll;">
      <div class="pie-title">当前异常</div>
      <div *ngIf="inspectionDistributionList">

        <div *ngFor="let item of inspectionDistributionList">

          <div class="ui-g">
            <div class="ui-g-8 un-hege">{{item.name}}</div>
            <div class="ui-g-4">
              <button pButton *ngIf="item.state ==0" type="button" label="未处理" class="ui-button-rounded"></button>
              <button pButton *ngIf="item.state ==1" type="button" label="处理中" class="ui-button-rounded"></button>
              <button pButton *ngIf="item.state ==2" type="button" label="已驳回" class="ui-button-rounded"></button>
              <button pButton *ngIf="item.state ==3" type="button" label="已完成" class="ui-button-rounded"></button>
              <button pButton *ngIf="item.state ==4" type="button" label="待确认" class="ui-button-rounded"></button>
              <span
                style="font-size: 28px;color: rgba(245, 154, 35, 0.898039215686275);margin-left: 20px;">{{item.inspectionSeverityDesc}}</span>
            </div>
          </div>
          <div class="un-hege-text">异常描述：{{item.InspectionDetails}}</div>
          <p-lightbox [images]="item.images"></p-lightbox>
          <!-- InspectionDetails -->
          <div>
            <span class="un-hege-text">提报人：</span>
            <span class="un-hege-text">{{item.submitter}}</span>
            <span class="un-hege-text">{{item.creationTime | momentFormat:'YYYY-MM-DD HH:mm:ss'}}</span>
          </div>
          <div>
            <span class="un-hege-text">处理人：</span>
            <span class="un-hege-text">{{item.handler}}</span>
            <span class="un-hege-text">{{item.completeTime | momentFormat:'YYYY-MM-DD HH:mm:ss'}}</span>
          </div>
          <div class="line"></div>
        </div>

      </div>


    </div>


  </div>
</div>